<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应视频展示</title>
    <!-- 引入Bootstrap CSS -->
    <link href="./bootstrap.min.css" rel="stylesheet">
    
    <style>
        /* 页面基础样式 */
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
        }
        
        /* 视频容器样式 - 确保响应式布局 */
        .video-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            box-sizing: border-box;
            width: 100%;
            min-height: 0; /* 允许flex子元素缩小 */
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        
        /* 视频包装器 */
        .video-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 1200px;
            background-color: #000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            aspect-ratio: 16/9; /* 保持16:9的宽高比 */
            transition: all 0.3s ease;
        }
        
        .video-wrapper:hover {
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        }
        
        /* 自适应视频样式 */
        .adaptive-video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain; /* 保持视频比例，不裁剪 */
        }
        
        /* 按钮容器样式 */
        .button-container {
            margin-top: 15px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            width: 100%;
            max-width: 960px;
            padding: 10px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        /* 响应式按钮布局 - 中等屏幕 */
        @media (max-width: 768px) {
            .button-container {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .random-goddess-btn,
            .control-btn {
                flex: 1;
                min-width: 120px;
            }
            
            select.control-btn {
                min-width: 140px;
            }
        }
        
        /* 在小屏幕上调整按钮间距和布局 */
        @media (max-width: 480px) {
            .button-container {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                margin-top: 12px;
            }
            
            .random-goddess-btn,
            .control-btn {
                width: 100%;
                max-width: 280px;
            }
            
            select.control-btn {
                width: 100%;
                max-width: 280px;
            }
        }
        
        /* 随机女神按钮样式 */
        .random-goddess-btn {
            font-size: 16px;
            padding: 10px 20px;
            transition: all 0.3s ease;
            border-radius: 25px; /* 圆角按钮 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-weight: 500;
        }
        
        /* 随机女神按钮悬停效果 */
        .random-goddess-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
        }
        
        /* 随机女神按钮点击效果 */
        .random-goddess-btn:active {
            transform: translateY(0);
        }
        
        /* 控制按钮样式 */
        .control-btn {
            margin-left: 10px;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 25px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        /* 控制按钮悬停效果 */
        .control-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(25, 135, 84, 0.2);
        }
        
        /* 控制按钮点击效果 */
        .control-btn:active:not(:disabled) {
            transform: translateY(0);
        }
        
        /* 控制按钮禁用状态 */
        .control-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        /* 控制按钮响应式调整 */
        @media (max-width: 768px) {
            .control-btn {
                font-size: 14px;
                padding: 8px 16px;
                margin-left: 8px;
            }
        }
        
        @media (max-width: 576px) {
            .control-btn {
                font-size: 13px;
                padding: 7px 14px;
                margin-left: 5px;
            }
        }
        
        /* 响应式调整 - 平板和中等屏幕 */
        @media (max-width: 768px) {
            .video-container {
                padding: 0.5rem;
            }
            
            .video-wrapper {
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 小屏幕上使用更轻微的阴影 */
                max-width: 100%;
            }
            
            .video-controls {
                padding: 8px;
                gap: 8px;
            }
            
            .play-pause-btn {
                font-size: 16px;
                padding: 4px;
            }
            
            .speed-control {
                font-size: 13px;
                padding: 4px 8px;
            }
        }
        
        /* 响应式调整 - 小手机屏幕 */
        @media (max-width: 375px) {
            .video-container {
                padding: 0.25rem;
            }
            
            .video-controls {
                padding: 6px;
                gap: 5px;
            }
            
            .play-pause-btn {
                font-size: 14px;
                padding: 3px;
            }
            
            .speed-control {
                font-size: 12px;
                padding: 3px 6px;
            }
        }
        
        /* 视频加载动画 */
        .loading {
            text-align: center;
            padding: 2rem;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        /* 错误提示样式 */
        .error-message {
            color: #dc3545;
            margin-top: 10px;
            text-align: center;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 6px;
            padding: 10px 15px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 500;
        }
        
        /* 按钮图标和文字样式 */
        .btn-icon {
            margin-right: 5px;
            display: inline-block;
        }
        
        .btn-text {
            display: inline-block;
        }
        
        /* 加载指示器动画 */
        .loading-indicator {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.6;
            }
        }
        
        /* 在小屏幕上隐藏文字，只显示图标 */
        @media (max-width: 375px) {
            .btn-text {
                display: none;
            }
            
            .btn-icon {
                margin-right: 0;
            }
        }
        
        .spinner {
            width: 3rem;
            height: 3rem;
            border: 0.3rem solid rgba(0, 123, 255, 0.2);
            border-radius: 50%;
            border-top-color: #0d6efd;
            animation: spin 1s ease-in-out infinite;
            margin: 0 auto 1rem;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 简单的页脚样式 */
        footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 0.75rem 0;
            margin-top: auto;
            font-size: 0.9rem;
        }
        
        /* 小屏幕上简化页脚 */
        @media (max-width: 576px) {
            footer {
                padding: 0.5rem 0;
                font-size: 0.8rem;
            }
            
            .random-goddess-btn,
            .control-btn {
                font-size: 13px;
                padding: 7px 14px;
            }
        }
        
        /* 视频控制栏样式 */
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 1;
            transition: opacity 0.3s ease;
            box-sizing: border-box;
        }
        
        /* 确保在移动设备上控制栏始终可见 */
        @media (max-width: 768px) {
            .video-controls {
                opacity: 1 !important;
            }
        }
        
        .play-pause-btn {
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        
        .play-pause-btn:hover {
            background: rgba(0, 0, 0, 0.7);
        }
        
        .progress-container {
            flex: 1;
            height: 8px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .progress-container:hover {
            height: 10px;
            background: rgba(255, 255, 255, 0.4);
        }
        
        .progress-bar {
            height: 100%;
            background: #0d6efd;
            width: 0;
            transition: width 0.1s linear;
            border-radius: 4px;
            position: relative;
        }
        
        /* 进度条悬停效果 - 显示小圆圈指示器 */
        .progress-container::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 0 2px #0d6efd;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.2s ease;
            pointer-events: none;
        }
        
        .progress-container:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .speed-control {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        
        .speed-control:hover {
            background: rgba(0, 0, 0, 0.7);
        }
        
        /* 在触摸设备上增加点击区域大小 */
        @media (hover: none) and (pointer: coarse) {
            .play-pause-btn {
                min-width: 50px;
                height: 50px;
                font-size: 20px;
            }
            
            .progress-container {
                height: 12px;
            }
            
            .speed-control {
                padding: 8px 12px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
	<div id = "vue">
		<!-- 导航栏 -->
		<!-- <nav class="navbar navbar-dark bg-primary mb-0">
		    <div class="container">
		        <a class="navbar-brand" href="#">
		            自适应视频展示
		        </a>
		    </div>
		</nav> -->
		
		<!-- 主要内容区 - 视频容器 -->
        <div class="video-container">
            <!-- 视频加载状态 -->
            <div v-if="isLoading" class="loading">
                <div class="spinner-border" role="status"></div>
                <p class="mt-2 loading-indicator">加载视频中...</p>
            </div>
            <div v-else-if="error" class="loading">
                <p class="text-danger mb-3">视频加载失败</p>
                <button class="btn btn-primary" @click="retryLoadVideo">
                    重新加载
                </button>
            </div>
            
            <!-- 视频将在这里显示和随机女神按钮 -->
            <div v-else>
                <div class="video-wrapper">
                    <!-- 使用preload="metadata"来优化加载性能 -->
                    <video ref="videoPlayer" class="adaptive-video" :src="mainVideoSrc" preload="metadata" controls @loadedmetadata="onVideoLoaded" @error="onVideoError"></video>
                    
                    <!-- 自定义视频控制栏 -->
                    <div class="video-controls">
                        <button class="play-pause-btn" @click="togglePlayPause" aria-label="播放/暂停">
                            {{ isPlaying ? '⏸️' : '▶️' }}
                        </button>
                        <div class="progress-container" @click="seek" aria-label="视频进度条">
                            <div class="progress-bar" :style="{ width: progress + '%' }"></div>
                        </div>
                        <select class="speed-control" v-model="playbackSpeed" @change="changePlaybackSpeed" aria-label="播放速度">
                            <option value="0.5">0.5x</option>
                            <option value="1.0">1.0x</option>
                            <option value="1.5">1.5x</option>
                            <option value="2.0">2.0x</option>
                        </select>
                    </div>
                </div>
                <div class="button-container">
                    <button class="btn btn-primary random-goddess-btn" @click="getDescription" title="获取随机视频">
                        <span class="btn-icon">🎬</span>
                        <span class="btn-text">随机女神</span>
                    </button>
                    <button class="btn btn-success control-btn" @click="togglePlayPause" title="播放/暂停">
                        <span class="btn-icon">{{ isPlaying ? '⏸️' : '▶️' }}</span>
                        <span class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</span>
                    </button>
                    <button class="btn btn-secondary control-btn" @click="fastRewind" title="快退10秒">
                        <span class="btn-icon">⏮️</span>
                        <span class="btn-text">快退10秒</span>
                    </button>
                    <button class="btn btn-warning control-btn" @click="fastForward" title="快进10秒">
                        <span class="btn-icon">⏭️</span>
                        <span class="btn-text">快进10秒</span>
                    </button>
                    <select class="form-control control-btn" v-model="playbackSpeed" @change="changePlaybackSpeed" style="width: auto;">
                        <option value="0.5">0.5倍速</option>
                        <option value="1.0">1.0倍速</option>
                        <option value="1.5">1.5倍速</option>
                        <option value="2.0">2.0倍速</option>
                    </select>
                </div>
            </div>
        </div>
		
		<!-- 页脚 -->
		<footer>
		    <div class="container">
		        <p class="mb-0">调整窗口大小查看视频自适应效果</p>
		    </div>
		</footer>
	</div>
    

    <!-- 引入Bootstrap JS -->
    <script src="./bootstrap.bundle.min.js"></script>
    
	<script type="text/javascript" src="../vue/vue.min.js"></script>
	<link href="../vue/element/index.css" rel="stylesheet">
	<script type="text/javascript" src="../vue/element/index.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="../js/main.min.js"></script>
	
	<!--消息提示-->
	<script src="../js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="../js/lightyear.js"></script>
	
	<script type="text/javascript" src="../vue/vue_config.js"></script>
	<script type="text/javascript" src="../vue/axios.min.js"></script>
	<script type="text/javascript" src="../vue/vue_api.js"></script>
	<script type="text/javascript" src="../vue/commons.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#vue',
			data: {
				mainVideoSrc: "",
				isLoading: true,
				error: false,
				autoRetryCount: 0, // 自动重试计数
				isPlaying: false, // 视频播放状态
				playbackSpeed: 1.0, // 播放速度
				progress: 0 // 播放进度
			},
			created() {
				console.log("created")
				window.addEventListener('resize', this.adjustVideo);
				this.getDescription();
			},
			beforeDestroy() {
				// 清理事件监听器，防止内存泄漏
				window.removeEventListener('resize', this.adjustVideo);
				
				// 清理视频事件监听器
				const video = this.$refs.videoPlayer;
				if (video) {
					video.removeEventListener('play', () => {
						this.isPlaying = true;
					});
					video.removeEventListener('pause', () => {
						this.isPlaying = false;
					});
					video.removeEventListener('ended', () => {
						this.isPlaying = false;
					});
					video.removeEventListener('timeupdate', this.updateProgress);
				}
				
				// 清理进度更新定时器
				if (this.progressUpdateTimer) {
					clearInterval(this.progressUpdateTimer);
				}
			},

			methods: {
					
					//共用
					async getDescription(){
						var url = rootUrl+"freeapi/randomGodessVideo";
						//var url = "http://43.226.47.104/"+"freeapi/randomGodessVideo";
						try {
							this.isLoading = true;
							this.error = false;
							await fetchDataGet(url).then(res =>{
								if(res.code === 200){
								    
									this.mainVideoSrc = res.message;
								    console.log(this.mainVideoSrc);
								    this.isLoading = false; // 关键修改：视频URL获取成功后将加载状态设为false
								} else {
									this.error = true;
									this.isLoading = false;
									danger(res.message || '获取视频信息失败');
								}
							})
						} catch (err) {
							this.error = true;
							this.isLoading = false;
							console.error('获取视频失败:', err);
							danger('获取视频失败，请稍后重试');
						}
				},
				
				// 重试加载视频
				retryLoadVideo() {
					console.log('尝试重新加载视频...');
					this.mainVideoSrc = ''; // 清空视频源以触发重新加载
					this.getDescription(); // 重新获取视频
				},
				
				// 播放/暂停切换
				togglePlayPause() {
					const video = this.$refs.videoPlayer;
					if (video) {
						if (video.paused || video.ended) {
							video.play().then(() => {
								this.isPlaying = true;
							}).catch(error => {
								console.error('播放失败:', error);
								alert('播放失败: ' + error.message);
							});
						} else {
							video.pause();
							this.isPlaying = false;
						}
					}
				},
				
				// 快进10秒
				fastForward() {
					const video = this.$refs.videoPlayer;
					if (video && !isNaN(video.duration)) {
						// 快进10秒，但不超过视频总时长
						video.currentTime = Math.min(video.duration, video.currentTime + 10);
						this.updateProgress();
					}
				},
				
				// 快退10秒
				fastRewind() {
					const video = this.$refs.videoPlayer;
					if (video) {
						// 快退10秒，但不小于0
						video.currentTime = Math.max(0, video.currentTime - 10);
						this.updateProgress();
					}
				},
				
				// 调整播放速度
				changePlaybackSpeed() {
					const video = this.$refs.videoPlayer;
					if (video) {
						video.playbackRate = parseFloat(this.playbackSpeed);
						console.log('播放速度已调整为:', video.playbackRate);
					}
				},
				
				// 跳转到指定位置
				seek(event) {
					const video = this.$refs.videoPlayer;
					if (video) {
						const progressBar = event.currentTarget;
						const rect = progressBar.getBoundingClientRect();
						const pos = (event.clientX - rect.left) / rect.width;
						video.currentTime = pos * video.duration;
					}
				},
				
				// 更新播放进度
				updateProgress() {
					const video = this.$refs.videoPlayer;
					if (video && !isNaN(video.duration) && video.duration > 0) {
						this.progress = (video.currentTime / video.duration) * 100;
						this.isPlaying = !video.paused && !video.ended;
					}
				},

				onVideoLoaded() {
					this.isLoading = false;
					this.adjustVideo(); // 初始调整
					
					// 设置播放速度
					const video = this.$refs.videoPlayer;
					if (video) {
						video.playbackRate = parseFloat(this.playbackSpeed);
						
						// 监听播放状态
						video.addEventListener('play', () => {
							this.isPlaying = true;
						});
						video.addEventListener('pause', () => {
							this.isPlaying = false;
						});
						video.addEventListener('ended', () => {
							this.isPlaying = false;
						});
						
						// 监听timeupdate事件更准确地更新进度
						video.addEventListener('timeupdate', this.updateProgress);
						
						// 移除之前可能存在的定时器
						if (this.progressUpdateTimer) {
							clearInterval(this.progressUpdateTimer);
						}
						
						console.log('视频已加载，时长:', video.duration);
					}
				},
				
				onVideoError() {
					this.isLoading = false;
					this.error = true;
					console.error('视频加载失败');
					// 添加可选的自动重试逻辑
					if (this.autoRetryCount < 2) { // 最多自动重试2次
						this.autoRetryCount++;
						console.log(`自动重试第${this.autoRetryCount}次...`);
						setTimeout(() => this.retryLoadVideo(), 1000);
					}
				},
			
				adjustVideo() {
					const container = document.querySelector('.video-container');
					const containerWidth = container.clientWidth;
					const containerHeight = container.clientHeight;
					const videoElement = document.querySelector('.adaptive-video');
					const videoWrapper = document.querySelector('.video-wrapper');
					
					// 在移动设备上特别优化
					const isMobile = window.innerWidth <= 768;
					
					if (videoWrapper) {
						// 在小屏幕上调整视频容器的最大高度
						if (isMobile) {
							const viewportHeight = window.innerHeight;
							// 视频容器高度不超过视口高度的70%
							videoWrapper.style.maxHeight = `${viewportHeight * 0.7}px`;
							videoWrapper.style.aspectRatio = 'auto'; // 在小屏幕上移除固定宽高比
						} else {
							videoWrapper.style.maxHeight = 'none';
							videoWrapper.style.aspectRatio = '16/9';
						}
					}
					
					// 可以根据需要添加额外的调整逻辑
					console.log(`容器尺寸: ${containerWidth}x${containerHeight}`);
					if (videoElement) {
						console.log(`视频尺寸: ${videoElement.offsetWidth}x${videoElement.offsetHeight}`);
					}
				},
			}
		
		})
	</script>
</body>
</html>